<template>
  <div>
    <div class="flex">
      <div ref="map" class="map"></div>
      <div ref="pointMap" class="pointMap"></div>
    </div>
  </div>
</template>
<script>
  import mapboxgl from "mapbox-gl";
  import base from "../../../api/base";
  export default {
    props: {
      bridgeId: {
        type: String
      },
      type: {
        type: String
      }
    },
    data() {
      return {
        sectionList: [],
        pointList: [],
        download: base.DOWNLOADURL,
        imageUrl: require("../../../assets/mapbox/bg.png"),
        pointImageUrl: require("../../../assets/mapbox/bg.png"),
        geojson: {
          type: "FeatureCollection",
          features: [],
        },
        arr: [],
        pointArr: [],
        zoom: 15.9, // 缩放级别
        proportion: "", //图片比例
        yPoint: 0.0010127542875721929,
        coordinates: [
          [-76.54335737228394, 39.18579907229748],
          [-76.52803659439087, 39.1838364847587],
          [-76.5295386314392, 39.17683392507606],
          [-76.54520273208618, 39.17876344106642],
        ],
      }
    },
    mounted() {
      this.initMap()
      this.initPointMap()
    },
    watch: {
      bridgeId: {
        handler(newVal) {
            if(this.bridgeId !== '' && this.bridgeId !== '0') {
                this.queryCrossSectionByType()
                this.removePoint()
            }
        },
        immediate: true
      },
      type: {
        handler(newVal) {
            if(newVal){
                this.queryCrossSectionByType()
                this.removePoint()
            }
        }
      }
    },
    methods: {
      //截面图清空
      removePoint(){
        this.pointImageUrl = require("../../../assets/mapbox/bg.png");
        var map = this.pointMap.getSource("overlay");
        map.updateImage({
            url: this.pointImageUrl
        });
        if (this.pointArr.length > 0) {
            this.pointArr.map((v) => {
                v.remove()
            })
            this.pointArr = []
        }
      },
      //查询立面
      get() {
        // 根据桥梁 id 获取桥梁下立面
        this.$api.mearsuringPointSetting
          .getFacade({
            ownId: this.bridgeId,
          })
          .then((res) => {
            // 移除所有的点
            if (this.arr.length > 0) {
              this.arr.map((v) => {
                v.remove();
              });
              this.arr = [];
            }
            // this.initName = "立面";
            let data = res.data.data[0][0];
            if (!data) {
              this.imageUrl = require("../../../assets/mapbox/bg.png");
            } else {
              this.imageUrl = this.download + data.twoDimension.path;
            }
            // 更新地图上的点/图片/位置点
            var map = this.map.getSource("overlay")
            this.map.setZoom(15.9);
            map.updateImage({
              url: this.imageUrl
            });
            if (data) {
              map.setCoordinates(data.coordinates);
            }
            // 渲染点位
            if (this.sectionList.length > 0) {
              console.log(this.sectionList)
              if (data && data.viewList.length > 0) {
                data.viewList.map((item) => {
                  this.sectionList.map((i) => {
                    if (item.properties.id === i) {
                      this.initMarker(item);
                    }
                  })
                });
              }
            }
          });
      },
      // 初始化地图
      initMap() {
        mapboxgl.accessToken =
          // "pk.eyJ1IjoieHVzaGFucGVpIiwiYSI6ImNqenl5M2t0aTA0dzczY3AzdXJoajB6emcifQ.Gpduip9bhda1q8BX2Xc2UQ";
        "pk.eyJ1IjoiYW9mZW5nMjAwMCIsImEiOiJja252a3Q4cWkwazU3MnZwZDZ2MDN0MDg5In0.7HHfJfVC4Mht7IeL5yO4kQ";
        var mapStyle = {
          version: 8,
          name: "Dark",
          sources: {
            mapbox: {
              type: "vector",
              url: "mapbox://mapbox.mapbox-streets-v8",
            },
            overlay: {
              type: "image",
              url: this.imageUrl,
              coordinates: this.coordinates,
            },
          },
          layers: [{
            id: "overlay",
            source: "overlay",
            type: "raster",
          }, ],
        };
        this.map = new mapboxgl.Map({
          style: mapStyle,
          center: [0, 0], //地图中⼼经纬度
          zoom: this.zoom, //缩放级别
          maxZoom: 24,
          pitch: 0,
          container: this.$refs.map,
          zoomAdjust: null,
          antialias: true,
          dragRotate: false,
          touchZoomRotate: false,
        })
      },
      initPointMap() {
        mapboxgl.accessToken =
          // "pk.eyJ1IjoieHVzaGFucGVpIiwiYSI6ImNqenl5M2t0aTA0dzczY3AzdXJoajB6emcifQ.Gpduip9bhda1q8BX2Xc2UQ";
          "pk.eyJ1IjoiYW9mZW5nMjAwMCIsImEiOiJja252a3Q4cWkwazU3MnZwZDZ2MDN0MDg5In0.7HHfJfVC4Mht7IeL5yO4kQ";
        var mapStyle = {
          version: 8,
          name: "Dark",
          sources: {
            mapbox: {
              type: "vector",
              url: "mapbox://mapbox.mapbox-streets-v8",
            },
            overlay: {
              type: "image",
              url: this.pointImageUrl,
              coordinates: this.coordinates,
            },
          },
          layers: [{
            id: "overlay",
            source: "overlay",
            type: "raster",
          }, ],
        };
        this.pointMap = new mapboxgl.Map({
          style: mapStyle,
          center: [0, 0], //地图中⼼经纬度
          zoom: this.zoom, //缩放级别
          maxZoom: 24,
          pitch: 0,
          container: this.$refs.pointMap,
          zoomAdjust: null,
          antialias: true,
          dragRotate: false,
          touchZoomRotate: false,
        })
      },
      initMarker(data) {
        // 创建一个点
        var el = document.createElement("div");
        el.className = "marker";
        el.style.backgroundSize = "24px";
        el.style.backgroundRepeat = "no-repeat";
        el.style.backgroundPosition = "center";
        el.style.backgroundImage = "url(point.png)";
        el.style.cursor = "grab";
        console.log("+");
        el.addEventListener("click", (e) => {
          e.stopPropagation();
          console.log("点击的玩意", data)
          this.queryBridgePointByCrossSectionId(data.properties.id)
        });
        // 创建文字信息
        var textEl = document.createElement("div");
        textEl.className = "marker";
        textEl.textContent = data.properties.message;
        textEl.style.backgroundColor = "rgba(51,51,51,.7)";
        textEl.style.height = "20px";
        textEl.style.borderRadius = "3px";
        textEl.style.paddingLeft = "5px";
        textEl.style.paddingRight = "5px";
        textEl.style.marginTop = "50px";
        textEl.style.display = "inline-block";
        textEl.style.color = "#3ED385";
        el.appendChild(textEl);
        textEl.addEventListener("click", (e) => {
          e.stopPropagation();
        });
        // add marker to map
        var marker = new mapboxgl.Marker(el)
          .setLngLat(data.geometry.coordinates)
          .setDraggable(false)
          .addTo(this.map);
        this.arr.push(marker);
        marker.data = data.properties;
      },
      initPointMarker(data) {
        // 创建一个点
        var el = document.createElement("div");
        el.className = "marker";
        el.style.backgroundSize = "24px";
        el.style.backgroundRepeat = "no-repeat";
        el.style.backgroundPosition = "center";
        el.style.backgroundImage = "url(point.png)";
        el.style.cursor = "grab";
        console.log("+");
        el.addEventListener("click", (e) => {
          e.stopPropagation();
          console.log("点击的玩意", data)
          this.$emit('child-event', data.properties.code,data.properties.id)
        });
        // 创建文字信息
        var textEl = document.createElement("div");
        textEl.className = "marker";
        textEl.textContent = data.properties.message;
        textEl.style.backgroundColor = "rgba(51,51,51,.7)";
        textEl.style.height = "20px";
        textEl.style.borderRadius = "3px";
        textEl.style.paddingLeft = "5px";
        textEl.style.paddingRight = "5px";
        textEl.style.marginTop = "50px";
        textEl.style.display = "inline-block";
        textEl.style.color = "#3ED385";
        el.appendChild(textEl);
        textEl.addEventListener("click", (e) => {
          e.stopPropagation();
        });
        // add marker to map
        var marker = new mapboxgl.Marker(el)
          .setLngLat(data.geometry.coordinates)
          .setDraggable(false)
          .addTo(this.pointMap);
        this.pointArr.push(marker);
        marker.data = data.properties;
      },
      //截面数据
      queryCrossSectionByType() {
        this.$api.analysis.queryCrossSectionByType({
          bridgeId: this.bridgeId,
          type: this.type
        }).then(res => {
          if (res.data.success) {
            this.sectionList = res.data.data
            this.get()
          }
        })
      },
      //测点数据
      queryBridgePointByCrossSectionId(data) {
        this.$api.analysis.queryBridgePointByCrossSectionId({
          bridgeId: this.bridgeId,
          type: this.type,
          crossSection: data
        }).then(res => {
          if (res.data.success) {
            this.pointList = res.data.data
            this.getFacadePoint(data)
          }
        })
      },
      getFacadePoint(data) {
        //根据截面查询点
        this.$api.mearsuringPointSetting
          .getFacadePoint({
            id: data
          })
          .then((res) => {
            if (this.pointArr.length > 0) {
              this.pointArr.map((v) => {
                v.remove();
              });
              this.pointArr = [];
            }
            console.log("测点数据", res.data.data[0][0]);
            let datas = res.data.data[0][0];
            if (datas && datas.picturePath) {
              this.pointImageUrl = this.download + datas.picturePath;
            } else {
              this.pointImageUrl = require("../../../assets/mapbox/bg.png");
            }
            // 更新地图上的点/图片/位置点
            var map = this.pointMap.getSource("overlay");
            map.updateImage({
              url: this.pointImageUrl
            });
            if (datas && datas.coordinates) {
              map.setCoordinates(datas.coordinates);
            }
            // 渲染点位
            if (this.pointList.length > 0) {
              if (datas && datas.viewList && datas.viewList.length > 0) {
                datas.viewList.map((item) => {
                  this.pointList.map((i) => {
                    if (item.properties.id === i) {
                      this.initPointMarker(item)
                    }
                  })
                  console.log("重新添加点");
                });
              }
            }
          });
      }
    }
  }

</script>
<style scoped>
  .map {
    width: 60%;
    height: 300px;
  }

  .pointMap {
    margin-left: 20px;
    width: 38%;
    height: 300px;
  }

</style>
